<html>
    <head>
        <link type="text/css" rel="stylesheet" href="/Dstylesheets/main.css" />
		<script type="text/javascript" src="/Dscripts/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="/Dscripts/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#tabs").tabs();
				$("#todolist").accordion({
					autoHeight: true,
					navigation: true,
					collapsible: true,
					active: false
				});
				$("#finishedtasks").accordion({
					autoHeight: true,
					navigation: true,
					collapsible: true,
					active:false
				});
				$("#addtodo").accordion({
					autoHeight: true,
					navigation: true,
					collapsible: false,
				});
				$('#dialog_link, ul.icons li').hover(
						function() { $(this).addClass('ui-state-hover'); }, 
						function() { $(this).removeClass('ui-state-hover'); }
				);
				$('#taskbutton').click(
					function(){
						//todo add validate function
						$('#taskform').submit();
					}
				);
			});
		</script>
		<style type="text/css">
			body{ font: 70% "Trebuchet MS", sans-serif;}
			ul.icons {margin: 0; padding: 0;}
			ul.icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul.icons span.ui-icon {float: left; margin: 0 4px;}
			#tabs{width:350px;float:left;}
			#abs{height:200px;width:350px;background:black;float:left;}
		</style>
    </head>
	
    <body>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Todo List</a></li>
				<li><a href="#tabs-2">Finished Tasks</a></li>
				<li><a href="#tabs-3">Add Todo</a></li>
			</ul>
			<div id="tabs-1">
		    	<div id="todolist">
			        {% for note in notes %}
						{% ifequal note.state 0 %}
							<h3><a href="#">{{ note.content|escape}}</a></h3>
							<div>
						        <p>I made this decision at {{note.date|timezone:8|date:"Y-m-d H:i:s"}}</p>
								<p>
			                    	{{note.detail|linebreaksbr}}
								</p>
								{% ifequal editable "true" %}
				                    <ul class="icons ui-widget ui-helper-clearfix">
				                        <li class="ui-state-default ui-corner-all" title="finished">
				                        	<a href="/tasks/finish?key={{note.key.id}}"><span class="ui-icon ui-icon-flag"></span></a>
				                        </li>
				                    </ul>
								{% endifequal %}
							</div>
						{% endifequal %}
			        {% endfor %}
				</div>
			</div>
			<div id="tabs-2">
				<div id="finishedtasks">
				        {% for note in notes %}
							{% ifequal note.state 1 %}
								<h3><a href="#">{{ note.content|escape}}</a></h3>
								<div>
							        <p>I finished this task at {{note.date|timezone:8|date:"Y-m-d H:i:s"}}</p>
									<p>
				                    	{{note.detail|linebreaksbr}}
									</p>
								</div>
							{% endifequal %}
				        {% endfor %}
					</div>	
			</div>
			<div id="tabs-3">
				<div id="addtodo">
				 	{% ifequal editable "true" %}
						<h3 id="form-note" ><a href="#">Add a new task:</a></h3>
						<div>
						    <form id="taskform" action="/tasks" method="post">
						        <div>
					            	<p>title:</p><input type="text" name="content"/>
									<p>detail:</p><textarea name="detail" rows="3" cols="40"></textarea>
					            </div>
					            <div>
					                 <ul class="icons ui-widget ui-helper-clearfix">
				                        <li class="ui-state-default ui-corner-all" title="Add a task">
				                        	<span id="taskbutton" class="ui-icon ui-icon-clock" ></span>
				                        </li>
				                    </ul>
					            </div>
						    </form>
						</div>
					{% endifequal %}
				</div>
			</div>
		</div>
    	<div id="abs"><img src="/Dimages/abs.jpg"></div>
	</body>
</html>
